<template>
  <div class="container">
    <el-card :style="{maxHeight: contentHeight * 0.9 + 'px'}" class="box-card">
      <div class="title">卡信息查询</div>
      <el-tabs v-model="activeName">
        <el-tab-pane name="base">
          <span slot="label"><i class="el-icon-date"></i> 基础信息</span>
          <card-base-info :card-info="cardInfo"></card-base-info>
        </el-tab-pane>
        <el-tab-pane label="消费记录" name="consumption">
          <span slot="label"><i class="el-icon-tickets"></i> 消费记录</span>
          <card-consumption-info :card-info="cardInfo"></card-consumption-info>
        </el-tab-pane>
        <el-tab-pane label="充值记录" name="recharge">
          <span slot="label"><i class="el-icon-document"></i> 充值记录</span>
          <card-recharge-info :card-info="cardInfo"></card-recharge-info>
        </el-tab-pane>
      </el-tabs>
      <!-- 工具栏 -->
      <div class="btn-bar">
        <el-button round size="small" style="float: left;" type="danger" @click="doUnbindMember">解绑会员</el-button>
        <el-button round size="small" style="float: left;" type="success" @click="doBindMember">绑定会员</el-button>
        <el-button round size="small" type="primary" @click="enterCardNo">手输卡号</el-button>
        <el-button round size="small" type="warning" @click="readCard">重新识别</el-button>
      </div>
    </el-card>
    <div class="home-btn">
      <div class="btn-item">
        <el-button icon="el-icon-back" round size="small" type="primary" @click="goBackHome"> 返 回</el-button>
      </div>
      <div class="btn-item">
        <el-button icon="el-icon-s-finance" round size="small" type="success" @click="goRecharge">去充值</el-button>
      </div>
      <div class="btn-item">
        <el-button icon="el-icon-edit" round size="small" type="info" @click="goUpdate">卡修改</el-button>
      </div>
      <!-- <div class="btn-item"><el-button type="warning" round size="small" icon="el-icon-s-finance" @click="goBindMember">绑会员</el-button></div> -->
      <!-- <div class="btn-item"><el-button type="primary" round size="small" icon="el-icon-s-finance" @click="goAddSecond">开副卡</el-button></div> -->
    </div>
  </div>
</template>

<script>
import CardBaseInfo from './CardBaseInfo.vue'
import CardRechargeInfo from './CardRechargeInfo.vue'
import CardConsumptionInfo from './CardConsumptionInfo.vue'
import {mapGetters} from 'vuex'
import {bindMember, getCardInfo, unbindMember} from '@/api/card'
import {readCardNo} from '@/utils/cardreader'
import {getMemberInfoByOpenid} from '@/api/member'

export default {
  name: 'CardInfo',
  components: {
    CardBaseInfo,
    CardRechargeInfo,
    CardConsumptionInfo
  },
  data () {
    return {
      activeName: 'base',
      readCardInterval: null,
      cardInfo: {}
    }
  },
  computed: {
    ...mapGetters(['contentHeight'])
  },
  mounted () {
    this.readCardInterval = setInterval(() => {
      this.readCard()
    }, 1000)
  },
  methods: {
    goBackHome () {
      this.$router.push('/card')
    },
    goRecharge () {
      this.$router.push('/card/recharge')
    },
    goUpdate () {
      this.$router.push('/card/lock')
    },
    goAddSecond () {
      this.$router.push('/card/second')
    },
    goBindMember () {
      this.$message.success('敬请期待...')
    },
    enterCardNo () {
      this.$prompt('请输入储值卡号码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'text',
        inputErrorMessage: '储值卡号码格式不正确'
      }).then(({value}) => {
        console.log(value)
        if (value) {
          this.getCardInfoByCardNo(value)
        }
      }).catch(() => {
        console.log('cancel')
      })
    },
    doBindMember () {
      if (!this.cardInfo.uid) {
        this.$message.warning('请先识别卡号')
        return false
      }
      this.$prompt('扫描顾客会员码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'password',
        inputErrorMessage: '储值卡号码格式不正确'
      }).then(({value}) => {
        console.log(value)
        if (value) {
          // 根据会员码获取会员id，然后根据会员id和加油卡uid调用会员绑定接口
          getMemberInfoByOpenid(value).then(res => {
            console.log(res)
            bindMember({uid: this.cardInfo.uid, memberId: res.data.id}).then(res => {
              console.log(res)
              this.getCardInfoByCardNo(this.cardInfo.cardNo)
              this.$message.success(res.msg || '会员绑定成功')
            }).catch(err => {
              console.log(err)
            })
          }).catch(err => {
            console.log(err)
            this.$message.warning('会员码不正确')
          })
        }
      }).catch(() => {
        console.log('cancel')
      })
    },
    doUnbindMember () {
      if (!this.cardInfo.uid) {
        this.$message.warning('请先识别卡号')
        return false
      }
      this.$confirm('确定解绑会员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        unbindMember({uid: this.cardInfo.uid}).then(res => {
          console.log(res)
          this.getCardInfoByCardNo(this.cardInfo.cardNo)
          this.$message.success(res.msg || '解绑成功')
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        console.log('cancel')
      })
    },
    readCard () {
      var cardNo = readCardNo()
      if (cardNo) {
        console.log(cardNo)
        this.cardInfo = {}
        this.getCardInfoByCardNo(cardNo)
        window.clearInterval(this.readCardInterval)
      } else {
        console.log('no card')
      }
    },
    getCardInfoByCardNo (cardNo) {
      this.cardInfo = {}
      getCardInfo(cardNo).then(res => {
        console.log(res)
        this.$message.success(res.msg || '查询成功')
        this.cardInfo = res.data
      }).catch(err => {
        console.log(err)
        this.$message.error((err || '查询失败') + cardNo)
      })
    }
  },
  beforeDestroy () {
    console.log('beforeDestroy')
    window.clearInterval(this.readCardInterval)
  }
}
</script>

<style scoped>
.box-card {
  width: 60%;
  margin-left: 20%;
  position: absolute;
  top: 3%;
  overflow-y: auto;
  padding: 20px;
}

.home-btn {
  position: absolute;
  top: 2%;
  left: 2%;
}

.btn-item {
  margin-bottom: 20px;
}

.title {
  text-align: center;
  font-size: 1.6rem;
  color: #666;
}

.card-form {
  background: white;
  padding: 20px;
}

.btn-bar {
  margin-top: 20px;
  text-align: right;
}
</style>
